
<!--
 * @Author: your name
 * @Date: 2020-09-15 19:24:00
 * @LastEditTime: 2021-04-21 16:04:46
 * @LastEditors: Please set LastEditors
 * @Description:  
-->
<style lang="less" scoped>
.cbir_box {
    background: #f4f9ff;
  text-align: center;
  height: 100vh;
}
 .cbir {
  padding-top:40px;
  display: flex;
  justify-content:center;
.left {
  width: 840px;
  .left_box {
      border: 1px #409eff dashed;
        padding-bottom: 20px;
    background: #fafafa;
    position: relative;
  }
   .sc {
    margin-top: 22px;
    button {
      width: 200px;
      font-size: 16px;
    }
  }
  .img {position: absolute;
    height: 100%;
	width: auto;
	left:50%;
	position: absolute;
   transform: translateX(-50%);
   object-fit: scale-down;
  }
  .img.filter {
    filter: blur(20px);
  }
  .photo {
   width:840px;
    height: 500px;
    overflow: hidden;
    // background: url("../../assets/img/21.jpeg") top center no-repeat;
    background-size: contain;
    position: relative;
  }
  .land_mark  {
  right: 0;
  position: absolute;
  z-index: 100;
  height: 587px;
    overflow-y: auto;
}
.land_mark li {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  cursor: pointer;
}
.land_mark li.border { border: 2px solid #409EFF;}
.land_markImg {
  width: 100%;
  height: 400px;
  background: rgba(0,0,0,.4);
  position: absolute;
  z-index: 99;
  display: flex;
  justify-content: center;
  padding-top: 100px;
}
.propertyListes {
  text-align: left;
  margin-top: -61px;
  li {
    padding-bottom: 20px;
    span {
      color: #fff;
      font-size: 14px;
    }
  }
}
.facebox {
  position: absolute;
  z-index: 99;
  left: 50%;
  top:50%;
}
// .clip_face {
//   display: block;
//   position: absolute;
//   z-index: 9999999;
//   border:2px red solid;
//   width: 177px;
//   height: 178px;
//   transform: scale(0.980392);
//   left: 327px;
//     top: 172px;
// }
.landmark_img_show {
  width: 200px;
  height: 200px;
  // overflow: hidden;
  margin-right: 50px;
}
}
.right {
 height: 580px;
  width: 300px;
  text-align: left;
  padding-left: 20px;
  border-top:#e8e8e8 solid 1px;
.rtip {
  color: #333;
  font-size: 16px;padding-top:20px;
  i {
    width:4px;
    height: 16px;
    background: #3e88f1;
    display: inline-block;
    margin-right: 5px;
    position: relative;
    top: 3px;
  }
}
background: #fafafa;
/deep/.el-checkbox {
  margin-top: 4px;
}
}
.params {
 
  h4 {
    color: #333;
    font-size: 15px;
    padding-bottom: 8px;
     padding-top:30px;
  }
}
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon-plus {
position: absolute;
    top: 50%;
    font-size: 60px;
    margin-left: -25px;
    color: #d7dae2;
    display: none;
}
.compare-scan {
   position: absolute;
    z-index: 991;
    top: 0;
    left: 0;
    width: 840px;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="transparent",endColorStr="#3e88f1",gradientType="0");
    border-bottom: 3px solid #3e88f1;
    -webkit-animation: scan 1.2s infinite;
    -moz-animation: scan 1.2s infinite;
    animation: scan 1.2s infinite;
    background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(#3e88f1));
    background: -webkit-linear-gradient(top,transparent,#3e88f1);
    background: -moz-linear-gradient(top,transparent,#3e88f1);
    background: linear-gradient(180deg,transparent,#3e88f1);
}
 .tip {
  padding-top: 20px;
  text-align: left;
 p{
    color: #999;
    line-height: 16px;
 }
}
/deep/.el-loading-mask {
  background: transparent
}
/deep/.el-radio {
  margin-right: 13px;
}
.propertyList_tit {
  position: relative;
  top:-20px;
  color: #fff;
  font-size: 14px;
}
/deep/.el-checkbox__input.is-checked+.el-checkbox__label {
  color: inherit;
}
/deep/.cbir .right[data-v-6557f326] .el-checkbox {
  margin-top: 6px;
}
.pre1 {
  line-height: 24px;
  color: #a11;
  font-size: 14px;
  white-space: pre-wrap;
  height: 208px;
  overflow-y: auto;
  transition: all 1s;
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    
}

&::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #ccc;
}
}
.cat_pre {
  font-size: 20px;
    color: #999;
    position: relative;
    left: 256px;
    cursor: pointer;
}
.faceNum {
  padding-top: 15px;
  span {
  color: #606266;
  font-size: 14px;
  padding-right: 5px;
  }
}
.el-icon-info {
  color:#999;
  padding-left: 5px;
}
</style>
<template>
<div class="cbir_box">
<div class="cbir">
       <div class="left">
       <div class="left_box">
            <ul class="land_mark">
             <li v-for="(markBox,index) of markboxs" :key="index" 
                :class="{border: activeBr == index}" 
                :style="{background: 'url(' + markBox.bg + ') top center / contain no-repeat'}" 
                :id="index == 1 ? 'smallFace' : String"
                @click="markboxHandle(index)"></li>
           </ul>
<!-- 人脸属性&landmark -->
           <div class="land_markImg" v-if="landMarkImg">
            
            <div class="landmark_img_show" :style="{background: 'url(' + landMarkBg.bg + ') top center / contain no-repeat'}">
            <!-- <p class="propertyList_tit" v-if="markboxs.length === 2 ? false : propertyList_isShow">最大人脸</p> -->
            </div>
             <div class="propertyListes">
               <li v-for="(propertyList,index) of propertyListes" :key="index" v-show="checkedProperty.includes(propertyList.t)"><span><em>{{ propertyList.t }}：</em>{{ propertyList.val | filterProperty }}</span></li>
             </div>
           </div>
        <form action="#" id="pos">
           <el-upload
             class="avatar-uploader"
             action="#" 
             :data="imgParams"
             :on-error="imgError"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload" 
             :auto-upload="true"
             :http-request="httpRequest">
         <div>
            <div class="photo">
           <div class="compare-scan" v-if="db_animate"></div>
            <i class="el-icon-plus"></i>
            <!-- <i class="clip_face" id="clipFace"></i> -->
             <canvas id="faceBox" ref="facebox" class="facebox" v-show="canvas1" :width="canvasParams.w1" :height="canvasParams.h1"></canvas>
           <img class="img" v-show="imageUrlShow" :src="imageUrl" :class="{filter: landMarkImg}" id="bigImg">
           </div>
          <div class="sc">
            <el-button type="primary">本地上传<i class="el-icon-upload el-icon--right"></i></el-button>
          </div>
         </div>
        </el-upload>
    </form>
       </div>
      <div class="tip"><p>温馨提示：图片文件支持PNG、JPG、JPEG、BMP，图片大小不超过3M，宽度 &lt; 2500px，人脸检测优先计算图中最大人脸</p></div>
     </div>
     <div class="right">
    <div v-show="params_show">
    <p class="rtip"><i></i><span>展示项</span></p>
     <div class="params">
        <h4>1. 属性：</h4>
         <template>
           <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
           <el-checkbox-group v-model="checkedProperty" @change="handleCheckedPropertyChange">
             <el-checkbox v-for="(property,index) of propertys" :label="property" :key="index">{{property}}</el-checkbox>
           </el-checkbox-group>
           <div class="faceNum">
            <span>最多处理人脸数：</span><el-input-number size="mini" v-model="imgParams.maxFaceNum" step-strictly :step="1" :min="1" :max="10"></el-input-number>
      <el-popover placement="top-start"
             title="最多处理人脸数："
             width="20"
             trigger="hover"
             content='最多处理人脸数 < 121，页面只展示最多处理人脸数为10'>
             <i slot="reference" class="el-icon-info"></i> </el-popover>
           </div>
         </template>
         <h4 style="padding-bottom:16px;padding-top:20px">2. 人脸关键点：</h4>
         <template>
            <el-radio-group v-model="landmarkParams.radio" @change="selectLandMarkHandle">
              <el-radio :label="106">106关键点</el-radio>
              <el-radio :label="5">5关键点</el-radio>
            </el-radio-group>
         </template>
     </div>
    </div>
    <div class="pre_result">
      <p class="rtip" style="margin-top:5px"><i></i><span>检测结果</span></p>
      <i :class="preIcon" class="cat_pre" @click="cat_preHandle"></i>
      <div class="jian_result">
      <pre class="pre1" ref="pre1" v-html="preHtml">
      </pre>
      </div>
    </div>
    
     </div>
  </div>
  </div>
</template>
<script>
import {
//  attribute,         //人脸属性（年龄性别）
 detectandevaluate, //人脸检测与质量评估(坐标，lamdmark)
//  extractFeature     //最大单人脸提取特征
 } from "@/api/propertiesShow"
// import html2canvas from "html2canvas";
import { getpreHtml, getFaceLocation, get106Dot, get5Dot } from './index'
 const propertyOptions = ['年龄', '性别', '嘴部', '眼部', '普通眼镜', '墨镜', '口罩', '手遮挡', '模糊', '光照', '其它遮挡', '头部姿势', '人脸置信度'] //属性配置项
 
export default {
  name: "cbir",
  data() {
    return {
      params_show: true,
      preIcon: 'el-icon-arrow-down',
      preHtml: getpreHtml,
      checkAll: true,
      checkedProperty: propertyOptions,
      propertys: propertyOptions,
      // isIndeterminate: false,
      faceMax_index: null,         //最大人脸index
      // propertyList_isShow: true,  //根据最大人脸index展示属性dom
       landmarkParams: {
       radio: 106,
       },
       radio: 106,
      loading: false,
      imgParams: {
         maxFaceNum: 120,
      },
       imageUrlShow: true,
      imageUrl: require('../../assets/img/001.jpg'),
      oldImageUrl: '',
      markboxs: [
         {
           bg:  require('../../assets/img/001.jpg')
         },
         { bg: ''},{ bg: ''},{ bg: ''},{ bg: ''},{ bg: ''},{ bg: ''},{ bg: ''},{ bg: ''},{ bg: ''},{ bg: ''}
      ],
      landMarkBg: { //landmark图
        bg: ''
      },
//人脸landmark106
      landMarkDot106_coord: get106Dot,
      
//人脸landmark5
      landMarkDot5_coord: get5Dot,
      
// 属性(年龄,性别)配置项
      propertyListes: [
        // { t: propertyOptions[0], val: 'none'},
        // { t: propertyOptions[1], val: 'none'},
        // { t: propertyOptions[2], val: 'none'},
        // { t: propertyOptions[3], val: 'none'},
        // { t: propertyOptions[4], val: 'none'},
        // { t: propertyOptions[5], val: 'none'},
        // { t: propertyOptions[6], val: 'none'},
        // { t: propertyOptions[7], val: 'none'},
        // { t: propertyOptions[8], val: 'none'},
        // { t: propertyOptions[9], val: 'none'},
        // { t: propertyOptions[10], val: 'none'},
        // { t: propertyOptions[11], val: 'none'},
        // { t: propertyOptions[12], val: 'none'}
      ], 
      propertyParams: {},
      
 // 人脸框位置（x,y,width,height）
      faceLocation: getFaceLocation, 
      activeBr: 0,
      db_animate: false,
      landMarkImg: false,
      errorMark: true, //上传人脸失败标识
      canvas1: true,
      canvasParams: {
        w1: '',
        h1: ''
      },
      RESULT_DATA: getpreHtml
    };
  },
  filters: {
   filterProperty(value) {
     console.log(value)
      if(value == 'none') {
      return '无'
    } else if(value == 'cover') {
      return '有'
    }else if(value == 'normal') {
      return '正常'
    }else if(value == 'open') {
      return '张口'
    }else if(value == 'close') {
      return '闭合'
    }
    return value
   }
  },
  watch: {
    'landmarkParams.radio' (val) {
      val == '5' ? this.canvas1 = false : String
    }
  },
  methods: {
// ---------------------------------------------------------------------------人脸上传处理------------------------------------------------------------------
//上传成功
     handleAvatarSuccess(res, file) {
      this.fileUrl(res, file.raw,'db_animate','imageUrl')
    },
// 上传前校验
    beforeAvatarUpload(file) {
      this.canvas1 = false
      this.imageUrl = ''
      this.loading = true
      this.imgRule(file.type, file.size, file)
      this.canvas1 = true
      this.landMarkImg = false
      this.activeBr = 0
    },
    fileUrl (res, fileRaw, animate, imageUrl) {
       let _this = this
       this[imageUrl] = URL.createObjectURL(fileRaw);
       this[animate] = this[imageUrl] ? true : false //展示搜索动画
       this.markboxs[0].bg = this.imageUrl
       this.loading = true
      //  res.result === "success" && res.score
// 判断是否返回数据

    },
//-----------------------------------------------------------------------------------人脸上传验证--------------------------------------------------------------
    imgRule (fileType, fileSize, fileRaw) {
    this.imageUrl = ''
      
      let _this = this,
          params = this.imgParams,
          bigImg = document.querySelector('#bigImg'),
          rawImage = new Image(),
          readers = new FileReader()
     function imageType () { return fileType === 'image/jpeg' || fileType === 'image/jpg' || fileType === 'image/png' || fileType === 'image/bmp' || !fileType }
     const isLt1M = fileSize / 1024 / 1024 < 3;
        if (!imageType()) { 
          this.$message.error('上传人脸图片只能是四种格式（jpg/jpeg/png/bmp）!')
          this.txtTip()
          } else if (imageType() && !isLt1M) {
             this.$message.error('上传人脸图片大小不能超过3MB!')
             this.txtTip()
          } else if (!imageType() && !isLt1M) {
             this.$message.error('上传人脸图片大小不能超过3MB,只能是四种格式（jpg/jpeg/png/bmp）!')
             this.txtTip()
          } else {
                new Promise((reslove) => {
                  _this.imageUrl ? reslove() : String
                }).then(() => rawImage.src = this.imageUrl)
                 let format = fileType.substr(fileType.indexOf('/') + 1)
                   params['format'] = format.toUpperCase()
                   if(params['format'] === 'JPEG') {
                     params['format'] = 'JPG'
                   }
                     new Promise((reslove) => {
                       readers ? reslove() : String
                     }).then(() => {
                        readers.readAsDataURL(fileRaw)
                        readers.onload = function (e) {
                        let url = e.target.result,
                            img = new Image()
                            img.src = url
                        img.onload = function () { 
                            params.width = img.width
                            params.height = img.height

                          if(img.width > 2500) {
                         _this.$message.warning('图片宽度不能超过 2500px', 4000)
                         setTimeout(() => {_this.$router.go(0)}, 2000)
                       }
                                          }
                    }
                         })
          }
        return imageType() && isLt1M;  
    },
// --------------------------------------------------------------上传图片-获取人脸坐标、landmark、属性----------------------------------------------------------------------
   async httpRequest(content){
        this.imageUrlShow = true
        this.canvas1 = false
         this.markboxs = this.markboxs.splice(0, 1)
        let _this = this,
            formData = new FormData() 
            formData.delete('file') //必须先删除虚拟form文件信息
            formData.append('file', content.file) 
            formData.append('maxFaceNum', this.imgParams['maxFaceNum'])
             formData.append('format', this.imgParams['format'])
            formData.append('faceFields', [ 'mask', 'light', 'expression', 'glasses', 'angle', 'age', 'gender','landmark106' ])  // 默认获取人脸检测的全部数据

           setTimeout(() => {
              // formData.append('width', this.imgParams.width)
              // formData.append('height', this.imgParams.height)
              detectandevaluate(formData).then((res) => {
                let data = res.data
                if(res.code === 0 && data.length != 0 && data !== null){
                  this.RESULT_DATA = data
                  this.preHtml = res.data  
                
// 人脸框和landmark 5 计算获取
                  let [dataLength,
                       landMarkArr, 
                       x, 
                       y, 
                       xyArr  //合并x,y坐标
                       ] = [data.length, [], [], [] ,[]]
                    // this.markboxs = this.markboxs.splice(0, 1)
                    this.faceLocation = []
                    this.landMarkDot5_coord = []
                    
                    data.forEach((item, index) => {
                       _this.faceLocation.push( //获取人脸框坐标
                         {
                           location: [item.location.bboxLeftX - 15, item.location.bboxLeftY, item.location.bboxWidth + 30, item.location.bboxHeight + 12]
                         }
                       )
                       _this.markboxs.push(  //获取右侧小脸数目
                         {
                           bg: ''
                         }
                       )
                         landMarkArr.push(item.landmark5)  
                    })
                   
              
                      landMarkArr.map((item,index1) => {
                        if(item.length === 10) {
                          switch (index1) {
                            case index1 : xy();break
                          }
                          function xy() {
                             item.forEach((val, index2) => {
                            if(index2 % 2 === 0) {
                               x.push(val)
                            } else {
                               y.push(val)
                            }
                          })
                          }
                        }
                      })
                     for(let i = 0; i < x.length; i++) {
                          xyArr.push(
                            {
                              x: x[i],
                              y: y[i]
                            }
                          )
                        }
                    let copyArr = [...xyArr]
                    
                    //合并x,y坐标到二维数组中
                     for(let i = 0; i < dataLength; i++) {
                       _this.landMarkDot5_coord.push((copyArr.splice(0, data[0].landmark5.length / 2)))
                      }
                      
// 人脸属性获取,l06 个关键点获取
                 {
                    let x1 = [],
                        y1 = [],
                        landMarkArr_106 = [],
                        xyArr1 = []
                    _this.landMarkDot106_coord = []
                    data.forEach((item, index) => {
                         landMarkArr_106.push(item.landmark106)  
                    })
                   landMarkArr_106.map((item,index1) => {
                        if(item.length === 212) {
                          switch (index1) {
                            case index1 : xy();break
                          }
                          function xy() {
                             item.forEach((val, index2) => {
                            if(index2 % 2 === 0) {
                               x.push(val)
                            } else {
                               y.push(val)
                            }
                          })
                          }
                        }
                      })
                     for(let i = 0; i < x.length; i++) {
                          xyArr1.push(
                            {
                              x: x[i],
                              y: y[i]
                            }
                          )
                        }
                    let copyArr1 = [...xyArr1]
                    
                    //合并x,y坐标到二维数组中
                     for(let i = 0; i < dataLength; i++) {
                       _this.landMarkDot106_coord.push((copyArr1.splice(0, data[0].landmark106.length / 2)))
                      }
                    
                  //  } else {
                  //     _this.$message.warning('图片质量评估未通过！属性获取失败，请另选上传', 5000)
                  //     this.reloadPage(2500)
                  //  }
                  //   else if(res1.code === 10205) {
                  //     this.$message.error(res1.msg + '！属性获取失败', 5000)
                  //  } else if(res1.code === 10008){
                  //     this.$message.error(res1.msg + '！属性获取失败', 5000)
                  //  } else {
                  //    this.$message.error(res1.msg + '！属性获取失败', 5000)
                  //  }
                    // })
                }
                 _this.face_box()
                 setTimeout(() => { //防止人脸框未及时绘制
                    _this.face_box()
                 }, 22);
                 setTimeout(() => {
                      _this.db_animate = false
                 }, 1000)
                } else if(data && data.length === 0) {
                       this.$message({
                        message: '未检测到人脸！请另选重试',
                         type: "warning",
                          showClose: true,
                          duration: 0
                       });
                      this.reloadPage(2500)
                    } 
                })
           }, 22)
            },
// -----------------------------------------------------------------------------绘制人脸------------------------------------------------------------------
         async face_box() {
           let _this = this,
               c1 = document.querySelector("#faceBox"), 
               bigImg = document.querySelector('#bigImg'),
               ctx1 = c1.getContext('2d'),
               img1 = new Image()
           setTimeout(() => {
             var _c = _this.faceLocation
             img1.src = _this.imageUrl
             img1.onload = function () {
              _this.canvasParams.w1 = img1.width
              _this.canvasParams.h1 = img1.height
      
//  计算出最大人脸
        // let  [faceMax, faceMax_index] = [[], null]
        //      _c.map((item) => {
        //       faceMax.push(item.location[2])
        //     })
        //      _c.map((item, index) => {
        //         item.location.includes(Math.max.apply(null, faceMax)) ? faceMax_index = index : ''
        //       })
        //    _this.faceMax_index = faceMax_index

        new Promise((reslove) => {
          img1 ? reslove() : String
        }).then(() => {
 
          c1.style = `transform: translate(-50%, -50%) scale(${ scaleValue() })`// 图片缩放按(实际宽高/可视宽高)以1为临界点比较计算
          ctx1.drawImage(img1, 0, 0) //人脸图转为canvas
          ctx1.lineWidth = "2"

//根据xy坐标&宽高绘制脸框
          //  判断人脸坐标数目(默认最多绘制10个人脸框)

         {
           let a = _c[0], b = _c[1], c = _c[2], d = _c[3], e = _c[4], f = _c[5], g = _c[6], h = _c[7], i = _c[8], j = _c[9]
            switch(_c.length) {
            case 1 : _d("#0073eb",a);break
            case 2 : _d("#0073eb",a); _d("red", b);break
            case 3 : _d("#0073eb",a); _d("red", b); _d("green", c);break
            case 4 : _d("#0073eb",a); _d("red", b); _d("green", c); _d("#0a3eaa", d);break
            case 5 : _d("#0073eb",a); _d("red", b); _d("green", c); _d("#0a3eaa", d); _d("#a612ea", e);break
            case 6 : _d("#0073eb",a); _d("red", b); _d("green", c); _d("#0a3eaa", d); _d("#a612ea", e); _d("#f8990a", f);break
            case 7 : _d("#0073eb",a); _d("red", b); _d("green", c); _d("#0a3eaa", d); _d("#a612ea", e); _d("#f8990a", f); _d("#73ffc2", g);break
            case 8 : _d("#0073eb",a); _d("red", b); _d("green", c); _d("#0a3eaa", d); _d("#a612ea", e); _d("#f8990a", f); _d("#73ffc2", g); _d("#ffa000", h);break
            case 9 : _d("#0073eb",a); _d("red", b); _d("green", c); _d("#0a3eaa", d); _d("#a612ea", e); _d("#f8990a", f); _d("#73ffc2", g); _d("#ffa000", h); _d("blue", i);break
            case 10 : _d("#0073eb",a); _d("red", b); _d("green", c); _d("#0a3eaa", d); _d("#a612ea", e); _d("#f8990a", f); _d("#73ffc2", g); _d("#ffa000", h);_d("blue", i);_d("black", j);break
          }
          function _d(color, _l) {
            ctx1.beginPath()
            ctx1.strokeStyle = color
            ctx1.rect(_l.location[0], _l.location[1], _l.location[2], _l.location[3])
            ctx1.stroke()
            ctx1.closePath()
         }
         }
// 根据三个坐标绘制脸框(左上右下)
        //   function sangDian_langMark() {  
        //     ctx1.beginPath();
        //     ctx.moveTo(_c[0],_c[0]); ctx.lineTo(_c[2],_c[0]); // 上边框
        //     ctx.moveTo(_c[0],_c[1]); ctx.lineTo(_c[2],_c[1]); // 下
        //     ctx.moveTo(_c[0],_c[0]); ctx.lineTo(_c[0],_c[1]); // 左
        //     ctx.moveTo(_c[2],_c[0]); ctx.lineTo(_c[2],_c[1]); // 右
        //     ctx1.closePath();
        //  }
            ctx1.stroke()
          // ctx1.save()
          
// 截取人脸框中图(默认为第一个脸框坐标) 
        {
          let _m = _this.markboxs,
              _s = function (x, y, z) { _this.smallFace(x, y, z) }
                 switch(_c.length) {
                 case 1 : _s(_m[1], ctx1, 0);break
                 case 2 : _s(_m[1], ctx1, 0); _s(_m[2], ctx1, 1);break
                 case 3 : _s(_m[1], ctx1, 0); _s(_m[2], ctx1, 1); _s(_m[3], ctx1, 2);break
                 case 4 : _s(_m[1], ctx1, 0); _s(_m[2], ctx1, 1); _s(_m[3], ctx1, 2); _s(_m[4], ctx1, 3);break
                 case 5 : _s(_m[1], ctx1, 0); _s(_m[2], ctx1, 1); _s(_m[3], ctx1, 2); _s(_m[4], ctx1, 3); _s(_m[5], ctx1, 4);break
                 case 6 : _s(_m[1], ctx1, 0); _s(_m[2], ctx1, 1); _s(_m[3], ctx1, 2); _s(_m[4], ctx1, 3); _s(_m[5], ctx1, 4); _s(_m[6], ctx1, 5);break
                 case 7 : _s(_m[1], ctx1, 0); _s(_m[2], ctx1, 1); _s(_m[3], ctx1, 2); _s(_m[4], ctx1, 3); _s(_m[5], ctx1, 4); _s(_m[6], ctx1, 5);  _s(_m[7], ctx1, 6);break
                 case 8 : _s(_m[1], ctx1, 0); _s(_m[2], ctx1, 1); _s(_m[3], ctx1, 2); _s(_m[4], ctx1, 3); _s(_m[5], ctx1, 4); _s(_m[6], ctx1, 5);  _s(_m[7], ctx1, 6); _s(_m[8], ctx1, 7);break
                 case 9 : _s(_m[1], ctx1, 0); _s(_m[2], ctx1, 1); _s(_m[3], ctx1, 2); _s(_m[4], ctx1, 3); _s(_m[5], ctx1, 4); _s(_m[6], ctx1, 5);  _s(_m[7], ctx1, 6); _s(_m[8], ctx1, 7);_s(_m[9], ctx1, 8);break
                 case 10 : _s(_m[1], ctx1, 0); _s(_m[2], ctx1, 1); _s(_m[3], ctx1, 2); _s(_m[4], ctx1, 3); _s(_m[5], ctx1, 4); _s(_m[6], ctx1, 5);  _s(_m[7], ctx1, 6); _s(_m[8], ctx1, 7);_s(_m[9], ctx1, 8);_s(_m[10], ctx1, 9);break
               }
         }
          
// 计算图片适应父元素
           function scaleValue() {
            let a, b, c, d = bigImg.clientWidth, e = bigImg.clientHeight, f = img1.width, g = img1.height
                b = g / e
                c = (a = f / d) > 1 || b > 1 ? 1 / (a >= b ? a : b) : 1
                return c
           }
        })
   }
  },1)
    },
// ---------------------------------------------------------------------------------截取人脸框中图-------------------------------------------------------------------------------
     smallFace(bgTarget, copyTarget, locationIndex) {
       let _this = this,
           _l = _this.faceLocation[locationIndex]
           new Promise((reslove) => {
           _this.faceLocation.length > 0 ? reslove() : String
         }).then(() => {
             let c2 = document.createElement("canvas"),
                 ctx2 = c2.getContext("2d")
                 c2.setAttribute('width', _l.location[2])
                 c2.setAttribute('height', _l.location[3])
             let dataImg = copyTarget.getImageData(_l.location[0], _l.location[1], _l.location[2], _l.location[3]) //复制人脸框图片   
                ctx2.putImageData(dataImg, -1, -2, 0, 0, _l.location[2] - 1, _l.location[3] - 1) //x,y为负 切去上左边框线，width&height-1为切去右边框线
                bgTarget.bg = c2.toDataURL("image/png")
         })
   },
// ---------------------------------------------------------------------------------绘制landmark并同时截取人脸-------------------------------------------------------------------
    landMark_handle(landMarkArray, landMark_index, landMark_col) {
         let _this = this,
             big_canvas_el = document.querySelector("#faceBox"),
             ctx1 = big_canvas_el.getContext('2d')
             
//  默认绘制106个landMark
                landMarkArray.map((item,index) => {
                 ctx1.beginPath()
                 if(big_canvas_el.width <= 200) {
                    R(1.5)
                 } else if(big_canvas_el.width == 802) {
                    R(1.7)
                 } else if(big_canvas_el.width > 200 && big_canvas_el.width < 900) {
                    R(3)
                 }  else if(big_canvas_el.width >= 900 && big_canvas_el.height == 400) {
                   R(1)
                 } else if(big_canvas_el.width >= 900 && big_canvas_el.width <= 1500) {
                    R(9)
                 } else {
                    R(15)
                 }
                 function R (R_value) {
                   ctx1.arc(item.x, item.y, R_value, 0, 2*Math.PI)
                 }
                 ctx1.fillStyle = landMark_col
                 ctx1.fill()
                 ctx1.closePath()
              })
               ctx1.restore()
               this.smallFace(this.landMarkBg, ctx1 ,landMark_index)
        },

// ---------------------------------------------------------------------------------人脸属性配置选项-------------------------------------------------------------------------------
// 属性及其他
    handleCheckAllChange(val) {
        this.checkedProperty = val ? propertyOptions : []
        this.isIndeterminate = false
      },
    handleCheckedPropertyChange(value) {
        let _this = this,
            checkedCount = value.length,
            valueArr = JSON.parse(JSON.stringify(value)),
            oldPropertyListes = [..._this.propertyListes]
            this.checkAll = checkedCount === this.propertys.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.propertys.length
            // this.markboxHandle(1) //默认展示第一个人脸属性
      },
//-----------------------------------------------------------------------------------右侧小脸切换----------------------------------------------------------------------------------
     markboxHandle(index, DOT) {
        let _this = this
            this.activeBr = index
            if(index !== 0) {
              this.landMarkImg = true 
             this.propertyListes = []
             let i = this.RESULT_DATA[index-1]
             let pitch = i.angle.pitch.toString().substr(0,4),
                 roll = i.angle.roll.toString().substr(0,5),
                 yaw = i.angle.yaw.toString().substr(0,4)
              this.propertyListes.push( //人脸属性
                     { t: propertyOptions[0], val: i.age },
                     { t: propertyOptions[1],  val: i.gender === 'female' ? '女' : '男' },
                     { t: propertyOptions[2], val: i.mouthStatus.type },
                     { t: propertyOptions[3], val: i.eyeStatus.status },
                     { t: propertyOptions[4], val: i.glassesStatus.type },
                     { t: propertyOptions[5], val: i.darkglasses.type },
                     { t: propertyOptions[6], val: i.mask.type },
                     { t: propertyOptions[7], val: i.handmask.type },
                     { t: propertyOptions[8], val: i.blur.type },
                     { t: propertyOptions[9], val: i.brightstatus.type },
                     { t: propertyOptions[10], val: i.othermask.type },
                     { t: propertyOptions[11], val: `pitch:${ pitch } ,roll:${ roll}, yaw:${ yaw}` },
                     { t: propertyOptions[12], val: i.probability },
                )
            } else {
              this.landMarkImg = false
            }
          
       //点击人脸，展示对应landmark数
        if(index !== 0) { 
       let imageUrlShow_time = setTimeout(() => { //展示虚化的背景图
          _this.imageUrlShow = true
       },125)
          _this.canvas1Hide()
        if(DOT === '106' || _this.landmarkParams.radio == '106') {
             _this.landMarkDot106_coord.map((item, i) => {
              landMarkDot(item)
            })
        } else if(DOT === '5' || _this.landmarkParams.radio == '5') {
             _this.landMarkDot5_coord.map((item, i) => {
              landMarkDot(item)
            })
        } else {
           _this.landMarkDot106_coord.map((item, i) => {
              landMarkDot(item)
            })
        }
           function landMarkDot(landMark_num) {
                  switch (index) {
                    case 1 : _f(landMark_num, 0, '#0073eb');break;
                    case 2 : _f(landMark_num, 1, 'red');break;
                    case 3 : _f(landMark_num, 2, 'green');break;
                    case 4 : _f(landMark_num, 3, '#0a3eaa');break;
                    case 5 : _f(landMark_num, 4, '#a612ea');break;
                    case 6 : _f(landMark_num, 5, '#f8990a');break;
                    case 7 : _f(landMark_num, 6, '#73ffc2');break;
                    case 8 : _f(landMark_num, 7, '#ffa000');break;
                    case 9 : _f(landMark_num, 8, 'blue');break;
                    case 10 : _f(landMark_num, 9, 'black');break;
                  }
                  function _f (x, y, z) {
                     _this.face_box()
                     _this.landMark_handle(x, y, z) 
                  }
                   }
           } else {
              this.face_box()
               this.imageUrlShow = true
           }
      },
// ---------------------------------------------------------------------------------隐藏canvas1画布------------------------------------------------------------------------------
       async canvas1Hide() {
          this.imageUrlShow = false
            let time = 600
            await new Promise((reslove) => {
              let faceBox = document.querySelector('#faceBox')
              faceBox ? reslove(faceBox) : String
            }).then((el) => {
              let timer = setInterval(() => {
                   el.style = 'display: none'
                 }, 0);
                 setTimeout(() => {
                   this.loading = false
                    clearInterval(timer)
                 }, time);
            })
       },
// --------------------------------------------------------------------------------人脸landmark展示数目选择-----------------------------------------------------------------------
      selectLandMarkHandle() {
         if(this.landmarkParams.radio == 106) {
          this.markboxHandle(this.activeBr, '106')
         } else {
           this.markboxHandle(this.activeBr, '5')
         }
      },
    txtTip () {
      let _this = this
        _this.imageUrl = ''
        _this.errorMark = false
    },
    errorHide() {
      this.canvas1Hide()
      this.imageUrl = ''
      this.db_animate = false
      this.markboxs = []
    },
// 上传失败
    imgError(err, file, fileList) {
    let _this = this
     this.errorMark ? errTip() : String
     function errTip () {          
        _this.$message({
               message: err.type == 'error' ? file.name + ' 上传失败，请重试' : String,
                type: "error",
                durantion: 3 * 1000
           })
     }
   },

  // 刷新页面
  reloadPage(time) {
     setTimeout(()=> { this.$router.go(0) }, time)
  },
  cat_preHandle() {
    if(this.preIcon === 'el-icon-arrow-down') {
      this.params_show = false
      this.preIcon = 'el-icon-arrow-up'
      this.$refs.pre1.style.height = '525px'
    } else {
       this.params_show = true
        this.$refs.pre1.style.height = '208px'
       this.preIcon = 'el-icon-arrow-down'
    }
  }
  },
  mounted() {
       this.$nextTick(() => {
         this.face_box() //预先默认处理静态图
       })
  }
}
</script>